<template>
  <view class="withdraw-container">
    <view class="title">提现</view>
    <!-- 提现金额输入框 -->
    <input type="number" v-model="withdrawAmount" placeholder="请输入提现金额" />
    <!-- 提现方式选择 -->
    <view class="withdrawal-method">
      <view class="method-item" v-for="(method, index) in withdrawalMethods" :key="index" @click="selectWithdrawalMethod(method)">
        {{method.name}}
      </view>
    </view>
    <!-- 确认提现按钮 -->
    <button @click="confirmWithdraw">确认提现</button>
  </view>
</template>

<script>
	export default {
	  data() {
	    return {
	      withdrawAmount: 0,
	      withdrawalMethods: [
	        { name: '微信提现', type: 'wechat' },
	        { name: '银行卡提现', type: 'bankCard' }
	      ],
	      selectedWithdrawalMethod: null
	    };
	  },
	  methods: {
	    selectWithdrawalMethod(method) {
	      this.selectedWithdrawalMethod = method;
	    },
	    confirmWithdraw() {
	      if (!this.selectedWithdrawalMethod) {
	        console.log('请选择提现方式');
	        return;
	      }
	      if (this.withdrawAmount <= 0) {
	        console.log('请输入正确的提现金额');
	        return;
	      }
	      // 这里实际要调用后端接口进行提现逻辑处理
	      // 示例：模拟请求后端接口
	      console.log(`准备使用 ${this.selectedWithdrawalMethod.name} 提现 ${this.withdrawAmount} 元`);
	    }
	  }
	};
</script>

<style>
	.withdraw-container {
	  padding: 20px;
	}
	.title {
	  font-size: 24px;
	  text-align: center;
	  margin-bottom: 20px;
	}
	input {
	  width: 100%;
	  height: 40px;
	  border: 1px solid #ccc;
	  border-radius: 5px;
	  padding: 0 10px;
	  margin-bottom: 20px;
	}
	.withdrawal-method {
	  margin-bottom: 20px;
	}
	.method-item {
	  padding: 10px;
	  border: 1px solid #ccc;
	  border-radius: 5px;
	  margin-bottom: 10px;
	  cursor: pointer;
	}
	button {
	  width: 100%;
	  height: 40px;
	  background-color: #007aff;
	  color: white;
	  border: none;
	  border-radius: 5px;
	}
</style>